<template>
  <div class="tagRouter">
    <el-scrollbar>
      <div class="scrollbar-flex-content">
        <div class="scrollbar-demo-item" v-for="(item, index) in dynamicTags" :key="index">
          <el-tag :type="item.type" closable @close="handleClose(index)" @click="bindTop(item)">
            <span class="active" v-if="processingFormattingStr() == item.routePath"></span> {{ item.name }}
          </el-tag>
        </div>
        <div class="w20"></div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from "vue-router";
import { storeToRefs } from 'pinia'
import { routeHistory } from "@/store/modules/routeHistory"
const routeHistoryStore = routeHistory()
const { dynamicTags } = storeToRefs(routeHistoryStore)
const route = useRoute()
const router = useRouter();
const handleClose = (index: any) => {
  if (index == 0) {
    if (dynamicTags.value.length > 1) {
      const routePath = dynamicTags.value[index + 1];
      routeHistoryStore.delItem(index)
      routeHistoryStore.linkPush(routePath);
      router.push(routePath.routePath)
    }
  } else {
    const routePath = dynamicTags.value[index - 1];
    routeHistoryStore.delItem(index)
    routeHistoryStore.linkPush(routePath);
    router.push(routePath.routePath)
  }

}
const bindTop = (item: any) => {
  router.push(item.routePath)
}
//home-details 字符串处理格式 home
const processingFormattingStr = () => {
  const routeName = route && typeof route.name === 'string' ? route.name : "";
  if (routeName.includes("-")) {
    const parts = routeName.split("-"); // 将字符串拆分成数组
    return "/" + parts.join("/"); // 将数组元素连接成路径字符串
  } else {
    return `/${routeName}`;
  }
}
const inIt = () => {
  routeHistoryStore.linkPush({
    name: route.meta.title,
    type: "primary",
    routePath: processingFormattingStr()
  })
}
onMounted(() => {
  inIt()
})
</script>
<style lang='scss' scoped>
.w20 {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.tagRouter {
  width: 100%;
  height: 50px;
  background-color: $white;
  border-radius: 5px;
  margin: 10px 0px;

  .scrollbar-flex-content {
    // width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding-right: 20px;
  }

  .el-tag {
    margin-left: 10px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .scrollbar-flex-content {
    display: flex;
  }

  .scrollbar-demo-item {
    flex-shrink: 0;
    // border-radius: 4px;
    // background: var(--el-color-danger-light-9);
    // color: var(--el-color-danger);
  }

  .active {
    width: 8px;
    height: 8px;
    background-color: var(--el-color-primary);
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
  }
}
</style>
